<template>
  <div>
    <div class="top">
      <div>我的收藏</div>
    </div>
    <div class="info">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全球房源" name="first">
          <!-- for循环 -->
          <div v-show="globalitem.length==0" class="listing_data">
            <ul>
              <li>
                <img src="../../assets/img/wushoucang.png" alt />
              </li>
              <li>
                <div style="font-size: 13px;color:#b9c1c9;text-align: center;margin-top:20px">暂无收藏</div>
              </li>
            </ul>
          </div>
          <div class="cycle" v-for="(item,index) in globalitem" :key="index">
            <div
              @click="globae(item.projectPropertyId,item.name,item.no,item.showImg,item.houseDescription,item.issuedInfo,item.propertyTypeName,item.developer,item.equityLimit,item.planningAcreage,item.turnRoomTime,item.houseNumber,item.loanIs,item.showVideo,item.projectDetailInfo)"
            >
              <img :src="item.projectImg" alt />
            </div>
            <div>
              <dl>
                <li>
                  {{item.pName}}
                  <span @click="eliminate(item.houseCollectionId)" v-show="imgshow">
                    <img src="../../assets/img/shoucang@2x (1).png" alt />
                  </span>
                  <span v-show="imsgeshow">
                    <img src="../../assets/img/shoucang@2x (2).png" alt />
                  </span>
                </li>

                <dt>
                  {{item.house_type}}
                  <span>|</span>
                  <span>{{item.planningAcreage}}㎡</span>
                  <span class="money">￥{{item.priceRange}}万</span>
                </dt>
                <dt>
                  <img src="../../assets/img/gongyu@2x.png" alt />
                  <span>{{item.propertyTypeName}}</span>
                  <span>
                    <img src="../../assets/img/lianpai@2x.png" alt />
                    <span>{{item.propertyTypeName}}</span>
                    <span>
                      <img src="../../assets/img/jingzhuang@2x.png" alt />
                      <span>{{item.oldNewType}}</span>
                    </span>
                  </span>
                </dt>
              </dl>
            </div>
          </div>
          <!-- 分页 -->
          <!-- 分页 -->
          <div class="block">
            <el-pagination
              background
              layout="prev, pager, next"
              @current-change="handleCurrentChange1"
              :total="total1"
              :current-page.sync="currentPage1"
              :page-size="1"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="STO房产" name="second">
          <!-- for循环 -->
          <div v-show="estate.length==0" class="listing_data">
            <ul>
              <li>
                <img src="../../assets/img/wushoucang.png" alt />
              </li>
              <li>
                <div style="font-size: 13px;color:#b9c1c9;text-align: center;margin-top:20px">暂无收藏</div>
              </li>
            </ul>
          </div>
          <div class="cycle" v-for="(item,index) in estate " :key="index">
            <div
              @click="particulars(item.id,item.pName,item.characteristic,item.sellProportion,item.projectImg)"
            >
              <img :src="item.projectImg" alt />
            </div>
            <div>
              <dl>
                <li>
                  {{item.pName}}
                  <span @click="stoApp(item.houseCollectionId)" v-show="imgshow">
                    <img src="../../assets/img/shoucang@2x (1).png" alt />
                  </span>
                  <span v-show="imsgeshow">
                    <img src="../../assets/img/shoucang@2x (2).png" alt />
                  </span>
                </li>
                <dt>
                  当前进度{{parseFloat(item.sellProportion*100).toFixed(0)}}%
                  <span
                    class="money"
                  >{{item.sellNum}}{{item.virtualWalletName}}</span>
                </dt>
                <dt>
                  <el-progress :percentage="item.sellProportion*100" status="exception"></el-progress>
                </dt>
                <dt>
                  已交易:{{item.sellNum}}{{item.virtualWalletName}}
                  <span
                    class="money1"
                  >距结束：{{item.remainingDays}}天</span>
                </dt>
                <dt>
                  <button>{{item.virtualWalletName}}</button>
                </dt>
              </dl>
            </div>
          </div>
          <!-- 分页 -->
          <div class="block">
            <el-pagination
              background
              layout="prev, pager, next"
              @current-change="handleCurrentChange"
              :total="total"
              :current-page.sync="currentPage"
              :page-size="1"
            ></el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs";
export default {
  inject: ["reload"],
  data() {
    return {
      activeName: "first",
      estate: [], //sto房产
      total: 1, //分页
      currentPage: 1,
      total1: 1, //分页
      currentPage1: 1,
      collitem: true, //收藏
      cancelitem: false, //取消收藏
      ballinId: true,
      ballRoute: false,
      //加载
      load: 0,
      loading: true,
      globalitem: [],
      imgshow: true,
      imsgeshow: false
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    format(percentage) {
      return percentage === 100 ? "满" : `${percentage}%`;
    },
    //分页
    handleCurrentChange: function(currentPage) {
      let that = this;
      console.log(currentPage);
      that.currentPage = currentPage;
      this.paging(that.currentPage);
    },
    handleCurrentChange1: function(currentPage1) {
      let that = this;
      console.log(currentPage1);
      that.currentPage1 = currentPage1;
      this.global(that.currentPage1);
    },
    // 全球房源详情跳转
    globae(
      one,
      two,
      free,
      five,
      six,
      four,
      num,
      num1,
      num2,
      num3,
      num4,
      num5,
      num6,
      num7,
      num8
    ) {
      this.$router.push({
        path: "global",
        query: {
          projectPropertyId: one,
          name: two,
          no: free,
          showImg: five,
          houseDescription: six,
          issuedInfo: four,
          propertyTypeName: num,
          developer: num1,
          equityLimit: num2,
          planningAcreage: num3,
          turnRoomTime: num4,
          houseNumber: num5,
          loanIs: num6,
          showVideo: num7,
          projectDetailInfo: num8
        }
      });
    },
    // sto跳转
    particulars(one, two, four, five, num) {
      this.$router.push({
        path: "particulars",
        query: {
          id: one,
          pName: two,
          characteristic: four,
          sellProportion: five,
          showImg: num
        }
      });
    },
    // sto接口数据
    paging() {
      let that = this;
      that.listLoading = true;
      that.$axios
        .get(window.addressUrl.collectionList, {
          params: {
            page: that.currentPage,
            rows: 2,
            token: sessionStorage.getItem("setToken"),
            type: 1
          }
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            that.estate = res.data.data;
            that.listLoading = false;
            that.total = Math.ceil(res.data.count / 2) - 1;
            console.log(that.total, 999);
          }
        });
    },
    // 全球房源
    global() {
      let that = this;
      that.listLoading = true;
      that.$axios
        .get(window.addressUrl.collectionList, {
          params: {
            page: that.currentPage1,
            rows: 2,
            token: sessionStorage.getItem("setToken"),
            type: 0
          }
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            that.globalitem = res.data.data;
            that.listLoading = false;
            that.total1 = Math.ceil(res.data.count / 2) - 1;
            console.log(that.total1, 999);
          }
        });
    },
    // 取消
    eliminate(houseCollectionId) {
      var that = this;
      that.$axios
        .post(
          window.addressUrl.update,
          qs.stringify({
            houseCollectionId: houseCollectionId
          })
        )
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            (that.imgshow = false), (that.imsgeshow = true), that.reload();
            that.$message("取消成功");
          }
        });
    },
    // sto
    stoApp(houseCollectionId) {
      var that = this;
      that.$axios
        .post(
          window.addressUrl.update,
          qs.stringify({
            houseCollectionId: houseCollectionId
          })
        )
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            (that.imgshow = false), (that.imsgeshow = true);
            that.reload();
            that.$message("取消成功");
          }
        });
    }
  },
  mounted() {
    this.paging(); //sto房产
    this.global();
  }
};
</script>
<style lang="less" scoped>
.top {
  width: 100%;
  height: 50px;
  background: rgba(255, 255, 255, 1);
  box-shadow: -1px 3px 6px 0px rgba(71, 142, 229, 0.08);
  div {
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: rgba(56, 83, 118, 1);
    line-height: 50px;
    margin-left: 9px;
  }
}
.info {
  width: 100%;
  background: rgba(255, 255, 255, 1);
  margin-top: 10px;
  padding-bottom: 15px;

  //   数据列表
  .cycle {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    width: 95%;
    margin: 0 auto;
    border: 1px solid #e6e6e6;
    padding-bottom: 25px;
    border-left-style: none;
    border-right-style: none;
    border-top-style: none;
    padding-top: 20px;

    div:nth-child(1) {
      width: 30%;
      //   height: 150px;
      border-radius: 10px;
    }
    div:nth-child(2) {
      width: 68%;
      height: 150px;
      dl li {
        font-size: 16px;
        font-family: PingFang-SC-Bold;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        list-style: none;
        span img {
          width: 12px;
          height: 12px;
          float: right;
          clear: both;
          margin-top: 5px;
        }
      }
      dl dt {
        font-size: 14px;
        font-family: PingFang-SC-Regular;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        padding-top: 12px;
        .money {
          font-size: 14px;
          font-family: PingFang-SC-Bold;
          font-weight: bold;
          color: rgba(56, 83, 103, 1);
          float: right;
          clear: both;
        }
      }
      dl dt img {
        width: 15px;
        height: 15px;
      }
    }
    img {
      width: 100%;
      height: 150px;
      border-radius: 10px;
    }
  }
}
/deep/.el-tabs__nav-wrap::after {
  box-shadow: -1px 3px 6px 0px rgba(71, 142, 229, 0.08);
}
/deep/.el-tabs__nav {
  margin-left: 10px;
}
.block {
  float: right;
  padding-top: 50px;
  clear: both;
}
.money1 {
  font-size: 13px;
  font-family: PingFang-SC-Regular;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  float: right;
}
button {
  height: 20px;
  background:rgba(255, 255, 255, 1);
  border: 1px solid rgba(153, 153, 153, 1);
  border-radius: 6px;
  font-size: 10px;
  font-family: PingFang-SC-Regular;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}
.listing_data ul li img {
  margin: 0 auto;
  width: 150px;
  height: 140px;
  display: flex;
}
</style>


